<template>
    <div class="bgblue w100p">
        <ul class="_container_ pl3 router clearfix media_disnone">
            <li class="w120  router_nav_li ">
                <router-link to="/index" class="cfff disblock">首页 </router-link>
            </li>
            <li v-for="(v,k) in navs" :key="k"
                class="router_nav_li"
                @mouseover="selectInnerNav(k,1)"
                @mouseout="selectInnerNav(k,-1)">
                <router-link v-html="v.name"
                             :to="'/details/'+v.term_id+'?taps=more&index='+k+'&two='+v.data[0].term_id+'&status='+v.data[0].is_status"
                             class="cfff disblock"> </router-link>
                <ul class="router_inner"
                    :style="{'height': nav_inner_show[k] ? nav_inner_height[k]+'px' : '0'}"
                    @mouseover="selectInnerNav(k,1)"
                    @mouseout="selectInnerNav(k,-1)">
                    <li class="router_inner_li curpointer"
                        v-html="v2.name"
                        v-for="(v2,k2) in v.data"
                        :key="k2"
                        @click.stop="changeRooter(v.term_id,v2.term_id,k,v2.is_status)">
                    </li>
                </ul>
            </li>
            <li class="router_nav_li"
                @mouseover="ismsgSelect=true"
                @mouseout="ismsgSelect=false">
                <router-link v-html="concats.text" :to="concats.link" class="cfff disblock"> </router-link>
                <ul class="router_inner"
                    :style="{'height': ismsgSelect ? '135px' : '0'}"
                    @mouseover="ismsgSelect=true"
                    @mouseout="ismsgSelect=false">
                    <li class="router_inner_li curpointer"
                        v-html="v2.text"
                        v-for="(v2,k2) in concats.childrens"
                        :key="k2"
                        @click.stop="changeRooter(0,v2.link,-1)"></li>
                </ul>
            </li>
        </ul>
        <div class="media_router_top">
            <div class="inner">
                <ul class="router fs14">
                    <li class="media_router_nav_li ">
                        <router-link to="/index" class="cfff disblock bgblue">首页 </router-link>
                    </li><li class="media_router_nav_li" v-for="(v,k) in navs">
                        <router-link v-html="v.name"
                                 :to="'/details/'+v.term_id+'?taps=more&index='+k+'&two='+v.data[0].term_id+'&status='+v.data[0].is_status"
                                 class="cfff disblock bgblue"> </router-link>
                    </li><li class="media_router_nav_li ">
                        <router-link to="/contact/msg" class="cfff disblock bgblue">联系我们 </router-link>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Router",
        props:['types'],
        data(){
            return{
                active_router:'/',
                concats:      {
                    text:'联系我们',
                    link:'/contact',
                    childrens:[
                        {text : '联系我们', link:'/contact/msg'},
                        {text : '意见留言', link:'/contact/idea'},
                        {text : '联系客服', link:'/contact/service'},
                    ]
                },
                ismsgSelect:false,
                navs : '',
                nav_inner_show:[],
                nav_inner_height:[]
            }
        },
        mounted(){

        },
        watch:{
            'types'(newVal,oldVal){
                var v = this;
                newVal.forEach(function (item,index) {
                    v.nav_inner_height.push(45*item.data.length);
                    v.nav_inner_show.push(false);
                });
                v.navs = newVal;
            }
        },
        methods:{
            selectInnerNav(index,status){
                var v = this;
                v.nav_inner_show.forEach((item,k)=>{
                    v.$set(v.nav_inner_show,k,false);
                });
                if(status==1){
                    v.$set(v.nav_inner_show,index,true);
                }
            },
            changeRooter(id1,id2,index,status){
                var v = this;
                if(index==-1){
                    this.$router.push(id2);
                }else{
                    this.$router.push({path:'/details/'+id1,query:{index:index,two:id2,taps:'more',status:status}});
                }
                v.nav_inner_show.forEach((item,k)=>{
                    v.$set(v.nav_inner_show,k,false);
                });
                v.ismsgSelect = false;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            closeSelect(type){
                /*ismsgSelect=false*/
                console.log(type);
            }
        }
    }
</script>

<style>
    .router_nav_li,.media_router_nav_li{
        font-size: .18rem;
        color: #fff;
        position: relative;
        width: 1.33rem;
        text-align: center;
        cursor: pointer;
    }
    .router_nav_li{
        float: left;
        line-height: 45px;
    }
    .media_router_nav_li{
        line-height: 60px;
        display: inline-block;
    }
    .router_nav_li.w120{
        width: 1.2rem;
    }
    .router_nav_li:after,.media_router_nav_li:after{
        content: '';
        position: absolute;
        width: 1px;
        height: 17px;
        background: #898989;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .router_nav_li:hover{
        background: #00a0e9;
    }
    .router .router_nav_li:last-child:after , .router .media_router_nav_li:last-child:after{
        width: 0;
        height: 0;
    }
    .router_inner{
        position: absolute;
        width: 100%;
        background: #00245f;
        text-align: center;
        line-height: 45px;
        font-size: .16rem;
        overflow: hidden;
        height: 0;
        transition: .2s;
        z-index: 3;
        /*display: none;*/
    }
    .router_inner_li:hover{
        background: #00a0e9;
    }
    .router_nav_li .router-link-active , .media_router_nav_li .router-link-active{
        background: #bf000e;
    }
</style>





















